<p>angular-day3 works!</p>
<hr>
<input required type="input box" [(ngModel)]="inputContent" [id]="'ng-model-attribute'">

<hr>
<!-- ngModel 的引用和属性调用 -->
<form action="" [id]="'ng-model-cite'">
    <!-- 此处声明模版引用变量#nameInp,设置noModel的value值为fromData.name,  #nameInp="ngModel"代表将本元素的ngModel对象赋值给模版引用变量 -->
    账号：<input required #nameInp="ngModel" type="text" [(ngModel)]="fromData.name" name="userName123">
    <br>
    <!-- nameInp.valid 直接调用ngModel的属性valid 是否为true -->
    元素是否有效：<span>{{nameInp.valid}}</span>
    <br>
    ngModel的name: <span>{{nameInp.name}}</span>
    <br>
    ngModel的value: <span>{{nameInp.value}}</span>
    <br>
    <br>
    密码：<input required #pasInp="ngModel" type="text" [(ngModel)]="fromData.password" name="password123">
    <br>
    元素是否有效：<span>{{pasInp.valid}}</span>
    <br>
    ngModel的name: <span>{{pasInp.name}}</span>
    <br>
    ngModel的value: <span>{{pasInp.value}}</span>
</form>


<hr>
<!-- 表单验证功能 -->
<form action="" [id]="'verify-form'">
    账号：<input required #nameInput="ngModel" type="text" [(ngModel)]="fromData.name" name="userName">
    <br>
    <!-- 当ngModel所在元素input为invalid的时候,span渲染,出现提示框 -->
    <span *ngIf="!nameInput.valid">请输入账号</span>
    <br>
    密码：<input required #pasInput="ngModel" type="text" [(ngModel)]="fromData.password" name="password">
    <br>
    <span *ngIf="!pasInput.valid">请输入密码</span>
    <br>
    <!-- 输出fromData数据信息 -->
    <button (click)="subBtnFun(fromData)">提交信息</button>
</form>